import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 导入 amfe-flexibale 模块
import 'amfe-flexible'

// 导入 normalize.css 模块、进行样式重置
import 'normalize.css'

// 按需导入下Vant组件使用步骤：
// 1. 导入
// 2. 注册
// 3. 看文档 - CV 与需求接近的结构
// 4. 改吧改吧，多余删除，没有的自己添加
// 5. 如果卡住了，反复看文档、查阅、尝试
import {
  NavBar,
  Tabbar,
  TabbarItem,
  Row,
  Col,
  Image as VanImage,
  Cell,
  Icon,
  Search
} from 'vant'

// Vue.use(): 一次只能全局注册一个组件
Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(NavBar)
Vue.use(Col)
Vue.use(Row)
Vue.use(VanImage)
Vue.use(Cell)
Vue.use(Icon)
Vue.use(Search)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

// 需求：实现Vant的自动按需导入
// 官方推荐程序员的做法，好处可以减小打包体积
// 1. 下包
//   yarn add vant@latest-v2 -S
//   yarn add babel-plugin-import -D
// 2. 在 babel.config.js 中 CV 官网的配置
// 3. 重启服务
// 4. 测试

// 需求：css适配(一套样式，适用于各种手机型号)
// 方案：flexible.js + rem
// 步骤：
// 1. 下包
//    yarn add amfe-flexible -S
//    yarn add postcss postcss-pxtorem -D
// 2. main.js 中 导入 amfe-flexible
//    这个模块会把手机宽度除以10作为html元素的字体大小
// 3. src并列处、创建 postcss.config.js 文件，填入固定的配置
//    用来实现 px -> rem
// 4. 重启
// 5. 测试
